<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>tabSlideOut jQuery plugin example page</title>
	
	<link href="css/example-page.css" rel="stylesheet" type="text/css" media="all" />
	
    <style type="text/css" media="screen">
    
    .slide-out-div {
       padding: 20px;
        width: 350px;
        height: 400px;
        background: #f2f2f2;
        border: #29216d 2px solid;
        position: fixed;
        font-family: helvetica;
        font-size: 14px;
        text-align: justify;
        -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;
    }

    .slide-out-div p {
        line-height: 1.8em;
        margin: 10px;
        padding-right: 10px;
    }
    .slide-out-div h1 {
        margin: 10px;
    }
    
	</style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.tabSlideOut.v1.3.js"></script>
         
         <script>
         $(function(){
             $('.slide-out-div').tabSlideOut({
                 tabHandle: '.handle',                              //class of the element that will be your tab
                 pathToTabImage: 'images/contact_tab.gif',          //path to the image for the tab (optionaly can be set using css)
                 imageHeight: '122px',                               //height of tab image
                 imageWidth: '40px',                               //width of tab image    
                 tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                 speed: 300,                                        //speed of animation
                 action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                 topPos: '150px',                                   //position from the top
                 fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
             });
         });

         </script>

</head>

<body>
    <div id="wrap">
        <div id="header">
            <h1>Working example of the tabSlideOut jQuery plugin</h1>
                        <p><a href="http://www.building58.com/examples/tabSlideOut.zip">Download sample (.zip)</a></p>
                        <p><a href="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js">Download the plugin</a></p>
                        <p><a href="http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/">View blog post about this plugin</a></p>
        </div>        
        
        <div id="content">
    
        </div>
        <div id="footer">
            <p>&copy;2009 WilliamPaoli</p>
        </div>
    </div>


    <div class="slide-out-div">
        <a class="handle" href="#">Content</a>
        <div id="ajuda" style="max-height: 430px; overflow: auto;">
            <h1>Sobre o SIAPU</h1>
        <p>O SIAPU deverá ser usado em planta fabril e deverá basear-se em resultados que deverão ser colhidos durante a fabricação das peças. Portanto, ele será baseado em conceitos de, Benchmarking (Melhoria Contínua), Kaizen (Melhor Tecnologia e Recursos Humanos) e Lean Manufacturing (Manufatura Limpa).</p><br />
        <p>Um segundo objetivo, porém, não menos importante, será auxiliar profissionais do ensino de usinagem, propiciando um instrumento com base em bibliografia (livros e artigos) que mostre à professores, instrutores, treinadores e auto aprendizes, desde as bases fundamentais do processo, bem como resultados de pesquisa neste importante segmento da indústria de transformação.</p>
        <p>O SIAPU deverá ser usado em planta fabril e deverá basear-se em resultados que deverão ser colhidos durante a fabricação das peças. Portanto, ele será baseado em conceitos de, Benchmarking (Melhoria Contínua), Kaizen (Melhor Tecnologia e Recursos Humanos) e Lean Manufacturing (Manufatura Limpa).</p><br />
        <p>Um segundo objetivo, porém, não menos importante, será auxiliar profissionais do ensino de usinagem, propiciando um instrumento com base em bibliografia (livros e artigos) que mostre à professores, instrutores, treinadores e auto aprendizes, desde as bases fundamentais do processo, bem como resultados de pesquisa neste importante segmento da indústria de transformação.</p>        
    </div>
    </div>
</body>
</html>
